<template>
  <el-dialog
    :title="title"
    top="80px"
    :visible.sync="dialogVisible"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    :before-close="onBack"
  >
    <el-container>
      <el-main
        :style="{ 'max-height': maxHeightDialog }"
        class="container-main"
      >
        <div class="title">
          <span>填写信息</span>
        </div>
        <el-card class="card" shadow="never" style="background: #fafafa">
          <el-form
            ref="orderForm"
            size="small"
            class="order_form"
            :model="form"
            :rules="rules"
            label-width="200px"
            label-position="right"
          >
            <div v-if="params.alramCode != undefined">
              <el-row>
                <el-col :span="20">
                  <el-form-item label="工单编号" prop="alramCode">
                    <span>{{ params.alramCode }}</span>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="20">
                  <el-form-item label="告警时间" prop="alarmOccurTime">
                    {{ params.alarmOccurTime }}
                  </el-form-item>
                </el-col>
                <el-col :span="20">
                  <el-form-item label="告警地点" prop="alarmLocation">
                    {{ params.alarmLocation }}
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="20">
                  <el-form-item label="告警类型">
                    <el-tag
                      size="medium"
                      :style="
                        params.deviceStatus
                          | constantKeyTagStyleObj('WARNING_TYPE')
                      "
                    >
                      {{ params.deviceStatus | constantKeyValue('WARNING_TYPE') }}
                    </el-tag>
                  </el-form-item>
                </el-col>
                <el-col :span="20">
                  <el-form-item label="紧急程度" prop="urgency">
                    <el-tag
                      size="medium"
                      :style="
                        params.urgency | constantKeyTagStyleObj('URGENCY')
                      "
                    >
                      {{ params.urgency | constantKeyValue('URGENCY') }}
                    </el-tag>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="20">
                  <el-form-item label="备注" prop="remarks">
                    {{ params.remarks }}
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <el-row>
              <el-col :span="20">
                <el-form-item label="报警原因" prop="alarmAttr">
                  <el-radio-group v-model="params.alarmAttr" size="mini">
                    <el-radio
                      v-for="(item, index1) in radioList"
                      :key="'value' + index1"
                      :label="item.value"
                      border
                      >{{ item.label }}</el-radio
                    >
                  </el-radio-group>
                </el-form-item>
              </el-col>

              <el-col :span="20">
                <el-form-item label="实际情况填写类型">
                  <el-radio-group v-model="writeType" size="mini">
                    <el-radio
                      v-for="(item, index1) in writeTypeList"
                      :key="index1"
                      :label="item.value"
                      >{{ item.label }}</el-radio
                    >
                  </el-radio-group>
                </el-form-item>
              </el-col>

              <el-col :span="20" v-if="writeType == '下拉选择'">
                <el-form-item label="实际情况描述" prop="key">
                  <el-select
                    v-model="params.alarmActualDesc"
                    placeholder="请选择实际情况描述"
                    style="width: 100%"
                    clearable
                    filterable
                  >
                    <el-option
                      v-for="(item, index2) in dictList"
                      :key="'value' + index2"
                      :label="item.dictText"
                      :value="item.dictValue"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="20" v-if="writeType == '手动填写'">
                <el-form-item label="实际情况描述">
                  <el-input
                    v-model="params.alarmActualRemark"
                    type="textarea"
                    placeholder="请输入实际情况描述"
                    :rows="2"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="20">
                <el-form-item label="现场照片/视频" prop="alarmImage">
                  <Uploads
                    ref="orderUpload"
                    accept="image/*,video/*"
                    :limit="limit"
                    typeText=" "
                  />
                  <div>最多只能传{{ limit }}张图片</div>
                </el-form-item>
              </el-col>

              <el-col :span="20">
                <el-form-item label="处理结果" prop="processResult">
                  <el-select
                    v-model="params.processResult"
                    placeholder="请选择处理结果"
                    clearable
                    filterable
                  >
                    <el-option
                      v-for="(item, index) in resultDictData"
                      :key="index"
                      :label="item.dictText"
                      :value="item.dictValue"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row v-if="params.jobReplyUserName != null">
              <el-col :span="20">
                <el-form-item label="回单人" prop="jobReplyUserName">
                  {{ params.jobReplyUserName }}
                </el-form-item>
              </el-col>

              <el-col :span="20">
                <el-form-item label="回单时间" prop="jobReplyTime">
                  {{ params.jobReplyTime | datefmt('YYYY-MM-DD HH:mm:ss') }}
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-main>
      <el-footer>
        <el-button
          type="warning"
          plain
          @click="onBack"
          style="margin-right: 10px"
          >取消</el-button
        >

        <el-button type="primary" :loading="loading" plain @click="handleSubmit"
          >确定</el-button
        >
      </el-footer>
    </el-container>
    <!-- <el-main>
      <el-row :gutter="20">
        <el-col :span="16" :offset="6">
          <el-form
            ref="orderForm"
            size="small"
            class="order_form"
            :model="form"
            :rules="rules"
          >
            
            <div v-if="params.alramCode != undefined">
              <el-form-item label="工单编号" prop="alramCode">
                <span>{{ params.alramCode }}</span>
              </el-form-item>
              <el-form-item label="报警地点" prop="alarmLocation">
                {{ params.alarmLocation }}
              </el-form-item>
              <el-form-item label="报警时间" prop="alarmOccurTime">
                {{ params.alarmOccurTime }}
              </el-form-item>
              <el-form-item label="紧急程度" prop="urgency">
                <el-tag
                  :style="params.urgency | constantKeyTagStyleObj('URGENCY')"
                >
                  {{ params.urgency | constantKeyValue('URGENCY') }}
                </el-tag>
              </el-form-item>
              <el-form-item label="备注" prop="remarks">
                {{ params.remarks }}
              </el-form-item>
            </div>
            <el-form-item label="报警原因" prop="alarmAttr">
              <el-radio-group v-model="params.alarmAttr" size="mini">
                <el-radio
                  v-for="(item, index1) in radioList"
                  :key="'value' + index1"
                  :label="item.value"
                  border
                  >{{ item.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>

            <el-form-item label="实际情况描述" prop="key">
              <el-select
                v-model="params.alarmActualDesc"
                placeholder="请选择实际情况描述"
                style="width: 100%"
                clearable
                filterable
              >
                <el-option
                  v-for="(item, index2) in dictList"
                  :key="'value' + index2"
                  :label="item.dictText"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="现场照片/视频" prop="alarmImage">
              <Uploads
                ref="orderUpload"
                accept="image/*,video/*"
                :limit="limit"
                typeText=" "
              />
              <div>最多只能传{{ limit }}张图片</div>
            </el-form-item>
            <el-form-item label="处理结果" prop="processResult">
              <el-select
                v-model="params.processResult"
                placeholder="请选择处理结果"
                clearable
                filterable
              >
                <el-option
                  v-for="(item, index) in resultDictData"
                  :key="index"
                  :label="item.dictText"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
            <div v-if="params.jobReplyUserName != null">
              <el-form-item label="回单人" prop="jobReplyUserName">
                {{ params.jobReplyUserName }}
              </el-form-item>
              <el-form-item label="回单时间" prop="jobReplyTime">
                {{ params.jobReplyTime | datefmt('YYYY-MM-DD HH:mm:ss') }}
              </el-form-item>
            </div>
           
          </el-form>
          <div style="padding-left: 30%">
            <el-button type="warning" plain @click="onBack">取消</el-button>

            <el-button
              type="primary"
              :loading="loading"
              plain
              style="margin-left: 5% !important"
              @click="handleSubmit"
              >确定</el-button
            >
          </div>
        </el-col>
      </el-row>
    </el-main> -->
  </el-dialog>
</template>

<script>
import orderManageApi from '@/api/order-manage'
import deviceManageApi from '@/api/device-manage'
import Uploads from '@/components/Drag/uploads'
import dataFormMixins from '@/mixins/data-form-mixins'
export default {
  name: 'OrderAdd',
  components: { Uploads },
  mixins: [dataFormMixins],
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    params: {
      type: Object,
      default: null,
    },
    // 有数据则表示为批量处理
    selected: {
      type: Array,
      default: null,
    },
    title: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      resultDictData: [],
      radioList: [
        {
          label: '实际报警',
          value: 1,
        },
        {
          label: '误报报警',
          value: 2,
        },
      ],
      urgencyList: [
        {
          label: '较低',
          value: 0,
          type: 'success',
        },
        {
          label: '普通',
          value: 1,
          type: 'primary',
        },
        {
          label: '紧急',
          value: 2,
          type: 'warning',
        },
        {
          label: '非常紧急',
          value: 3,
          type: 'danger',
        },
      ],
      loading: false,
      limit: 9,
      dictList: [],
      form: {
        // id: '',
        // // 工单编号
        // alramCode: '',
        // // 报警地点
        // alarmLocation: '',
        // // 报警时间
        // alarmOccurTime: '',
        // // 报警属性
        alarmAttr: 1,
        // urgency: '',
        // // 实际情况描述
        // key: '',
        // // 处理结果
        processResult: '',
        alarmActualDesc: '',
        // // 回单人
        // jobReplyUserName: '',
        // // 回单时间
        // jobReplyTime: '',
        // remarks: ''
      },
      type: '',
      rules: {
        // 实际情况描述
        alarmActualDesc: [
          { required: true, message: '请选择实际情况描述', trigger: 'change' },
        ],
        // 报警属性
        alarmAttr: [
          { required: true, message: '请选择报警属性', trigger: 'change' },
        ],
        // 处理结果
        processResult: [
          { required: true, message: '不能为空', trigger: 'blur' },
        ],
      },
      writeType: '下拉选择',
      writeTypeList: [
        {
          label: '下拉选择',
          value: '下拉选择',
        },
        {
          label: '手动填写',
          value: '手动填写',
        },
      ],
    }
  },
  mounted() {
    if (this.params.alarmActualDesc == 0) {
      this.writeType = '手动填写'
    }

    this.getResultDictData()
    if (this.selected.length < 1) {
      this.init()
    }
    this.getDictValueAttr()
  },
  methods: {
    getResultDictData() {
      const data = {
        fieldName: 'process_result',
        tableName: 't_job_reply',
      }
      deviceManageApi.getDictValueAttr(data).then((r) => {
        this.resultDictData = r.data.dictValue
      })
    },
    onBack() {
      this.$emit('close')
      this.reset()
    },
    reset() {
      // this.dialogVisible = false
      this.loading = false
      // this.$refs['orderForm'].resetFields()
    },
    init() {
      // 查找工单现场照片、视频
      const data = {
        jobId: this.params.id,
        assigneeUserId: this.params.jobReplyUserId,
      }
      orderManageApi.findJobsDetailWithFile(data).then((r) => {
        console.log(r.data.data)
        this.$refs['orderUpload'].fileList = r.data.data
      })
      // this.$nextTick(() => {
      //   Object.keys(this.form).forEach(key => {
      //     this.form[key] = row[key]
      //     if (key === 'key') {
      //       this.form[key] = row.alarmActualDesc
      //     }
      //   })
      //   this.urgencyList.forEach(e => {
      //     if (e.value === this.form.urgency) {
      //       this.form.urgency = e.label
      //       this.type = e.type
      //     }
      //   })
      //   this.form.jobId = this.params.id
      //   this.form.jobReplyUserName = this.$store.state.account.user.trueName
      // })

      // this.change()
    },
    getDictValueAttr(e) {
      //误报报警原因
      this.dictList = []
      const data = {
        fieldName: 'alarm_actual_desc_2', // + String(this.params.alarmAttr),
        tableName: 't_job_reply',
      }
      deviceManageApi
        .getDictValueAttr(data)
        .then((data) => {
          this.dictList = data.data.dictValue
        })
        .catch(() => {})
    },

    handleSubmit() {
      this.form.alarmActualDesc = this.params.alarmActualDesc
      this.form.alarmAttr = this.params.alarmAttr
      this.form.processResult = this.params.processResult
      this.form.alarmActualRemark = this.params.alarmActualRemark
      console.log('this.form :>> ', this.form, this.params)
      // debugger
      this.$refs['orderForm'].validate((err, values) => {
        if (err) {
          this.loading = true
          this.form.files = this.$refs['orderUpload'].fileList
          //  jobIdList: this.form.jobIdList

          // assigneeUserId: this.params.jobReplyUserId,
          //   jobId: this.params.id,
          //   status: this.params.status
          const params = {
            files: this.form.files,
            alarmAttr: this.params.alarmAttr,
            alarmActualDesc:
              this.writeType == '下拉选择' ? this.params.alarmActualDesc : 0,
            processResult: this.params.processResult,
            alarmActualRemark:
              this.writeType == '手动填写'
                ? this.params.alarmActualRemark
                  ? this.params.alarmActualRemark
                  : ''
                : '',
          }
          let url = ''
          let message = ''
          if (this.selected.length > 0) {
            params['jobIdList'] = this.selected.map((e) => e.id)
            message = '批量处理工单成功！'
            orderManageApi
              .fillIinItemsBatch(params)
              .then(() => {
                this.$message.success(message)
                this.onBack()
              })
              .catch(() => {
                this.loading = false
              })
          } else {
            params['assigneeUserId'] = this.params.jobReplyUserId
            params['jobId'] = this.params.id
            params['status'] = this.params.status

            message = '处理工单成功！'

            orderManageApi
              .fillIinItems(params)
              .then(() => {
                this.$message.success(message)
                this.onBack()
              })
              .catch(() => {
                this.loading = false
              })
          }
        }
      })
    },
  },
}
</script>
<style lang="scss">
// .order_form {
//   .el-form-item {
//     margin-bottom: 18px;
//     display: flex;
//     align-items: center;
//   }
//   .el-form-item label {
//     width: 200px;
//   }
//   .el-form-item .el-form-item__content {
//     width: 400px;
//   }
// }
</style>
<style lang="scss" scoped>
@import '../../../../styles/part-custom';
</style>

